<template>
  <div class="login">
      <login-header></login-header>
      <div class="logining" v-loading="loading">
          <div class="container">
              <div class="denglu">
                  <div class="title">
                      <span class="uname active">{{loginMethod}}</span>
                      <span class="hr"></span>
                      <span class="shaoma">扫码登录</span>
                  </div>
                  <input type="text" name="username" placeholder="邮箱/手机号码/小米ID"
                        v-model='username'
                        @blur="uTitle"
                  ><br>
                  <p class="red" ref="u"></p>
                  <input type="password" name="password" id="" placeholder="密码"
                        v-model="password"
                        @blur="pTitle"
                  ><br>
                  <p class="red" ref="p"></p>
                  <button @click="handleLogining">{{btn}}</button>
                  <div class="bottom">
                      <span class="phone-msg">手机短信登录/注册</span>
                      <span class="right">
                          <span class="zhuce active" @click="changeType">{{isRegister}}</span>
                          <span class="hr"></span>
                          <span class="noname">忘记密码？</span>
                      </span>
                  </div>
              </div>
          </div>
      </div>
      <login-footer></login-footer>
  </div>
</template>

<script>
import LoginHeader from "./components/Header"
import LoginFooter from "./components/Footer"
export default {
    name: 'Login',
    data(){
        return{
            loading: false,
            username: '',
            password: '',
            btn: '登录',
            loginType: 1,
            loginMethod: "账号登录",
            isRegister: "立即注册"
        }
    },
    mounted(){
        window.addEventListener('keydown',this.keyDown);
    },
    methods: {
        handleLogining(){
            if(this.loginType === 1){
                this.logining()
            }else if(this.loginType === 2){
                this.register()
            }
            
        },
        changeType(){
            if(this.loginType === 1){
                this.loginMethod = "注册账号";
                this.btn = "立即注册";
                this.loginType = 2;
                this.isRegister = "已有账号，立即登录"
            }else if(this.loginType === 2){
                this.loginMethod = "账号登录";
                this.btn = "登录";
                this.loginType = 1;
                this.isRegister = "立即注册"
            }
        },
        logining(){
            this.loading = true
            let { username, password } = this;
            if(username == '' || password == ''){
                this.$message("请输入账号和密码")
                this.loading = false;
                return;
            }
            this.axios.post("/user/login",{
                username,
                password
            }).then((res) => {
                console.log(res)
                this.$cookie.set("userId",res.id,"30MIN")
                this.$store.commit('saveToken',res.id)
                this.$store.commit('saveusername',res.username);
                sessionStorage.username = res.username;
                this.$router.push("/index");
                // alert("登录成功")
                this.$message("登录成功")
                this.loading = false;

            }, rej => {
                // alert(msg)
                this.$message(rej.msg)
                this.loading = false;
            })
        },
        register(){
            this.loading = true
            let { username, password } = this;
            if(username == '' || password == ''){
                this.$message("请正确输入账号和密码")
                this.loading = false;
                return;
            }
            this.axios.post('/user/register',{
                username,
                password
            }).then(() => {
                this.logining()
            }, msg => {
                // alert(msg)
                this.$message(msg)
                this.loading = false;
            })
        },
        keyDown(e){
            if(e.keyCode === 13){
                this.handleLogining();
            }
        },
        uTitle(e){
            let even = this.$refs.u;
            if(e.target.value === ''){
                even.innerHTML = "用户名不能为空"
            }else{
                even.innerHTML = ''
            }
        },
        pTitle(e){
            let even = this.$refs.p;
            if(e.target.value === ''){
                even.innerHTML = "密码不能为空"
            }else{
                even.innerHTML = ''
            }
        }
    },
    components: {
        LoginHeader,
        LoginFooter
    },
    destroyed(){
        window.removeEventListener("keydown",this.keyDown)
    }
}
</script>

<style lang="scss">
    .logining{
        height: 567px;
        background: url("/imgs/login-bg.jpg") no-repeat center center;
        border: 1px dashed #666;
        .denglu{
            width: 410px;
            height: 510px;
            padding: 0 31px;
            float: right;
            margin: 37px 10px 0 0;
            background: #fff;
            .title{
                font-size: 24px;
                font-weight: bold;
                text-align:center;
                display: flex;
                justify-content: space-around;
                margin: 40px 0 49px;
                .hr{
                    height: 24px;
                }
                .active{
                    color: #FF6600;
                }
                span{ 
                    cursor: pointer;
                }
            }
            input{
                width: 348px;
                height: 50px;
                margin-top: 20px;
                font-size: 16px;
                letter-spacing: 3px;
            }
            p.red{
                text-align: left;
                font-size: 12px;
                font-weight: bold
            }
            button{
                width: 348px;
                height: 50px;
                margin-top: 30px;
                margin-bottom: 14px;
                font-size: 16px;
            }
            .bottom{
                display: flex;
                justify-content: space-between;
                font-weight: bold;
                font-size: 14px;
                .phone-msg{
                    color: #FF6600;
                    cursor: pointer;
                }
                .right{
                    color: #999999;
                    cursor: pointer;
                }
            }
        }
    }
</style>